<template>
  <div class="home-container">
    <div class="wrap" ref="wrap">
      <!-- <div class="top"></div> -->
      <!-- 第一行 -->
      <Sinan></Sinan>
      <Seamless></Seamless>
      <Pyramid></Pyramid>
      <div class="divider"></div>
    </div>
  </div>
</template>
<script>
import { screenSize } from '../utils/resize'
export default {
  name: 'Home',
  data() {
    return {}
  },
  methods: {},
  mounted() {
    // 屏幕缩放
    screenSize(this.$refs.wrap)
  },
}
</script>
<style lang="scss" scoped>
.home-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .wrap {
    background-image: url('../assets/images/home/bj.jpg');
    background-size: contain;
    background-position: 50% 0;
    width: 1920px;
    height: 1080px;
    min-width: auto;
    min-height: auto;
    overflow: hidden;
    transform-origin: 0px 0px 0px;
    .top {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 80px;
      background-color: transparent;
      background: url('../assets/images/home/top_nav.png') no-repeat;
      background-position: 65% 0;
      border: none;
      overflow: hidden;
    }
    .divider {
      position: absolute;
      left: 50px;
      top: 3253px;
      width: 90%;
      height: 50px;
      width: 300px;
      border: none;
      background: transparent;
    }
  }
}
</style>
